<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- layui样式 -->
  <link rel="stylesheet" href="../../component/layui/css/layui.css">
  <title>Document</title>
  <style>
    #code {
      width: calc(100% - 200px);
      float: left;
      margin-right: 8px;
    }

    .layui-col-space15 {
      margin: 0px;
    }
  </style>
</head>

<body style="background-color: #ffffff">
  <form class="layui-form" action="">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body" pad15="">
            <div class="layui-form" lay-filter="">
              <div class="layui-form-item" id='userDepartmentOptionDiv'>


              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                  <input type="text" name="name" lay-verify="required" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                  <input type="text" name="username" lay-verify="required" lay-vertype="tips" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" lay-verify="required" lay-vertype="tips" class="layui-input">
                </div>
              </div>
              
              <div class="layui-form-item" style="margin-bottom: 0;text-align: center;">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="addUser">确认增加</button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </form>

  <script id="userDepartmentOption" type="text/html">
    {{# if(d.departmentCode == -2){ }}
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <select name="role" id="role">
          <option value="1">数据录入员</option>
          <option value="0">管理员</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">所属部门</label>
      <div class="layui-input-inline">
        <select name="sendDepartment" id="sendDepartment">
          {{# layui.each(d.sendDepartment, function(index, item){ }}
              <option value={{item.value}}>{{item.label}}</option>
          {{# }); }}
        </select>
      </div>
    </div>
    {{#  } else { }}
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <select name="role" id="role">
          <option value="1">录入员</option>
        </select>
      </div>
    </div>
    {{# } }}
  </script>

  <!-- layui JS -->
  <script src="../../component/layui/layui.js"></script>
  <script src="../../component/pear/pear.js"></script>
  <script src="../../js/base64.min.js"></script>
  <script src="../../js/myUtils.js"></script>
  <script>
    layui.use(['form', 'jquery', 'layer', 'Api', 'laytpl', 'request'], function () {
      var $ = layui.jquery,
        form = layui.form,
        layer = layui.layer,
        Api = layui.Api,
        request = layui.request,
        laytpl = layui.laytpl


      var userInfoData = layui.data('userInfo').item

      getSendDepartmentOptions()
      initTpl()


      //提交
      form.on('submit(addUser)', function (data) {
        let userInfoData = layui.data('userInfo').item
        let departmentCode = userInfoData.departmentCode == -2 ? data.field.sendDepartment:userInfoData.departmentCode
        var params = {
          name: data.field.name,
          username: data.field.username,
          password: Base64.encode(data.field.password),
          role: parseInt(data.field.role),
          departmentCode: parseInt(departmentCode)
        }
        // console.log("添加info params: ", params)
        layer.confirm('确认添加？', {
          btn: ['确定', '取消']
        }, function (index, layero) {
          var success = function (res) {
            if (res.errno == 0) {
              layer.alert('新增成功！', { icon: 1 });
              setTimeout(() => {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭 
              }, 2000);
            } else {
              layer.alert(res.errmsg, { icon: 2 });
            }
          }
          request.post(Api.user, params, success)
        }, function (index) {
          // 用户点击取消
        });
        return false;
      });

      function initTpl() {
        /** 初始化footer信息 **/
        var department = layui.data('options').data.sendDepartment
        department.push({
          value: -2,
          label: '扫黑办线索管理中心'
        })
        var tmp_data = {
          departmentCode: userInfoData.departmentCode,
          sendDepartment: department
        }
        // console.log('tmp_data', tmp_data)
        var userDepartmentOptionTpl = userDepartmentOption.innerHTML,
          userDepartmentOptionDiv = document.getElementById('userDepartmentOptionDiv');
        laytpl(userDepartmentOptionTpl).render(tmp_data, function (html) {
          userDepartmentOptionDiv.innerHTML = html;
        });
        form.render()
      }

      function getSendDepartmentOptions() {
        var success = function (res) {
          var data = res.data
          var options = {
            sendDepartment: myUtils.renameOption(data.sendDepartment),
          }
          layui.data('options', { key: 'data', value: options });
        }
        request.get(Api.getOptions, {}, success)
      }

    });
  </script>

</body>

</html>